<!-- eslint-disable vue/no-parsing-error -->
<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div class="main-container">
    <TableBody>
      <template #header>
        <TableHeader ref="tableHeaderRef" :show-filter="false">
          <template #search-content>
            <a-form ref="seachForm" :model="form">
              <a-row :gutter="24">
                <a-col :span="4">
                  <a-form-item field="id" hide-label>
                    <a-input-group style="width: 100%">
                      <a-select style="width: 50%" @change="typeFn" v-model="type" placeholder="first">
                        <a-option v-for="item in typeLists" :key="item.name" :value="item.value">{{
                          item.name
                        }}</a-option>
                      </a-select>
                      <a-input style="width: 50%" v-model="typeText" allow-clear placeholder="请输入搜索条件"><template
                          #suffix>
                          <!-- <icon-plus @click="open" style="cursor: pointer" />  -->
                        </template></a-input>
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="operatorIds" hide-label>
                    <a-select class="width100" v-model="form.operatorIds" multiple :max-tag-count="1"
                      placeholder="请选择运营商" allow-clear>
                      <a-option :value="0">中国移动</a-option>
                      <a-option :value="1">中国联通</a-option>
                      <a-option :value="2">中国电信</a-option>
                      <a-option :value="3">中国广电</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="classIds" hide-label>
                    <a-select class="width100" v-model="form.classIds" multiple :max-tag-count="1" placeholder="请选择商品分类"
                      allow-clear>
                      <a-option v-for="item in classLists" :key="item.id" :value="item.id">{{ item.name }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="mainPush" hide-label>
                    <a-select class="width100" v-model="form.mainPush" placeholder="请选择主推状态" allow-clear>
                      <a-option :value="1">开启</a-option>
                      <a-option :value="0">关闭</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="belongingPlaces" hide-label>
                    <a-select class="width100" v-model="form.belongingPlaces" multiple :max-tag-count="1"
                      placeholder="请选择归属地" allow-clear>
                      <a-option :value="0">随机归属地</a-option>
                      <a-option :value="1">固定归属地</a-option>
                      <a-option :value="2">收货归属地</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="selectNumberTypes" hide-label>
                    <a-select class="width100" v-model="form.selectNumberTypes" multiple :max-tag-count="1"
                      placeholder="请选择选号方式" allow-clear>
                      <a-option :value="0">随机选号</a-option>
                      <a-option :value="1">激活选号</a-option>
                      <a-option :value="2">在线选号</a-option>
                      <a-option :value="3">号池选号</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="idCardImg" hide-label>
                    <a-select class="width100" v-model="form.idCardImg" placeholder="请选择是否上传证件照" allow-clear>
                      <a-option :value="true">是</a-option>
                      <a-option :value="false">否</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="commissionRules" hide-label>
                    <a-select class="width100" v-model="form.commissionRules" multiple :max-tag-count="1"
                      placeholder="请选择佣金规则" allow-clear>
                      <a-option :value="0">秒返</a-option>
                      <a-option :value="1">次月底返</a-option>
                      <a-option :value="2">月月返</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="settlementType" hide-label>
                    <a-select class="width100" v-model="form.settlementType" placeholder="请选择结算方式" allow-clear>
                      <a-option :value="0">手动结算</a-option>
                      <a-option :value="1">自动结算</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="discountTimeType" hide-label>
                    <a-select class="width100" v-model="form.discountTimeType" placeholder="请选择优惠时长类型" allow-clear>
                      <a-option :value="0">固定优惠</a-option>
                      <a-option :value="1">到期可续</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="state" hide-label>
                    <a-select class="width100" v-model="form.state" placeholder="请选择商品状态" allow-clear>
                      <a-option :value="true">上架</a-option>
                      <a-option :value="false">下架</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addTime" hide-label>
                    <a-date-picker class="width100" v-model="form.addTime" show-time :disabledDate="changeTraceEnd"
                      placeholder="请选择开始创建时间" :time-picker-props="{ defaultValue: '12:00:00' }" :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))   
                          ),
                        },
                      ]" format="YYYY-MM-DD HH:mm:ss" />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endTime" hide-label>
                    <a-date-picker class="width100" v-model="form.endTime" show-time :disabledDate="changeTraceStart"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]" placeholder="请选择结束创建时间" :time-picker-props="{ defaultValue: '12:00:00' }" />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addBalance" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input v-model="form.addPrice" placeholder="开始售价" allow-clear />
                      <a-input v-model="form.endPrice" placeholder="结束售价" allow-clear />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addCost" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input v-model="form.addCost" placeholder="开始成本" allow-clear />
                      <a-input v-model="form.endCost" placeholder="结束成本" allow-clear />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addSetMealPrice" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input v-model="form.addSetMealPrice" placeholder="开始套餐售价" allow-clear />
                      <a-input v-model="form.endSetMealPrice" placeholder="结束套餐售价" allow-clear />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addSetMealGeneralFlow" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input v-model="form.addSetMealGeneralFlow" placeholder="开始套餐通用流量" allow-clear />
                      <a-input v-model="form.endSetMealGeneralFlow" placeholder="结束套餐通用流量" allow-clear />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addSetMealDirectionalFlow" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input v-model="form.addSetMealDirectionalFlow" placeholder="开始套餐定向流量" allow-clear />
                      <a-input v-model="form.endSetMealDirectionalFlow" placeholder="结束套餐定向流量" allow-clear />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addCallMinutes" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input v-model="form.addCallMinutes" placeholder="开始通话时长" allow-clear />
                      <a-input v-model="form.endCallMinutes" placeholder="结束通话时长" allow-clear />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addFirstPayAmount" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input v-model="form.addFirstPayAmount" placeholder="开始首充金额" allow-clear />
                      <a-input v-model="form.endFirstPayAmount" placeholder="结束首充金额" allow-clear />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addCommission" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input v-model="form.addCommission" placeholder="开始佣金" allow-clear />
                      <a-input v-model="form.endCommission" placeholder="结束佣金" allow-clear />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addDiscountTime" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input v-model="form.addDiscountTime" placeholder="开始优惠时长" allow-clear />
                      <a-input v-model="form.endDiscountTime" placeholder="结束优惠时长" allow-clear />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="age" hide-label>
                    <a-input v-model="form.age" placeholder="请输入年龄" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :span="4" >
                  <a-form-item  field="btns" hide-label>
                    <a-space :size="15">
                      <a-button type="primary" html-type="submit" @click="doRefresh(1)">
                        <template #icon> <icon-search /> </template>
                        搜索
                      </a-button>
                      <a-button @click="resetFn">
                        <template #icon>
                          <icon-sync theme="outline" size="14" />
                        </template>
                        <template #default>重置</template>
                      </a-button>
                    </a-space>
                  </a-form-item>
                </a-col>
                <a-col :span="24"  style="padding-top: 20px;padding-bottom: 20px; box-sizing: border-box; border-top: 1px solid #f2f3f5;display: flex;justify-content: space-between;">
                  <a-space :size="15">
                    <a-button type="outline" @click="goodsExport">
                      <template #default>导出</template>
                    </a-button>
                    <a-button type="outline" @click="openMallStock">
                      <template #default>充值库存</template>
                    </a-button>
                    <a-button type="outline" @click="openMallSys">
                      <template #default>商城设置</template>
                    </a-button>
                    <a-button type="outline" @click="openOneCodeEr(1)">
                      <template #default>商城链接</template>
                    </a-button>
                    <a-button type="outline" @click="openSendUser">
                      <template #default>发件人</template>
                    </a-button>
                    <a-button type="outline" @click="getDiviSettingForm">
                      <template #default>分润设置</template>
                    </a-button>
                  </a-space>
                  <a-space :size="15">
                    <TableConfig @update-border="onUpdateBorder" @update-striped="onUpdateStriped"
                      @refresh="doRefresh" />
                  </a-space>
                </a-col>
              </a-row>
            </a-form>
          </template>
        </TableHeader>
      </template>
    </TableBody> 
    <a-row :gutter="20" style="margin: 0; margin-bottom: 50px" v-if="table.dataList.length <= 0">
      <a-spin style="width: 100%; border-radius: 10px" :loading="tables.tableLoading">
        <div style="width: 100%; border-radius: 10px">
          <a-empty />
        </div>
      </a-spin>
    </a-row>
     <div v-else class="contenBox" style="margin-bottom: 20px">
      <div class="items" v-for="(item, index) in table.dataList" :key="index">
        <img v-show="item.operator[0] == 0" src="@/assets/yd.png" alt="" class="imgBcg" />
        <img v-show="item.operator[0] == 1" src="@/assets/lt.png" alt="" class="imgBcg" />
        <img v-show="item.operator[0] == 2" src="@/assets/dx.png" alt="" class="imgBcg" />
        <img v-show="item.operator[0] == 3" src="@/assets/gd.png" alt="" class="imgBcg" />
        <div class="topBox">
          <div class="shareBtns">
            <span v-if="item.mainPush == true" class="zhuClass"> 主推 </span>
            {{ item.name }}
          </div>
          <div class="shareBtn">
            <a-switch size="small" @change="changeState(item)" v-model="item.state" :checked-value="true"
              :unchecked-value="false" />
          </div>
          <div class="leftImageAges" style="margin-top: 30px">
            <a-image class="leftImage" fit="contain" :src="reSetImage(item.img[0])"  alt="" />
            <div class="ages"> <a-rate v-model="item.starRating" readonly /></div>
          </div>

          <div class="cardTags" style="margin-top: 30px; z-index: 3">
            <div class="tags" v-if="item.tagList.length > 0">
           
              <div v-for="items in item.tagList" :key="items.id">
                <div v-if="items.type == 0" :style="{
                  marginRight: '5px',
                  fontSize: '10px',
                  borderRadius: '3px',
                  color: items.fontColor ? items.fontColor : '',
                  padding: '2px 5px',
                  background: items.fillColor ? items.fillColor : '',
                  border: '1px solid' + (items.frameColor ? items.frameColor : '#ffffff'),
                }">
                  {{ items.name }}
                </div>
                <img v-else style="width: 100%; height: 20px; margin-right: 5px" :src="items.img" alt="" />
              </div>
            </div>
            <p class="textItemsHalf">商品ID：{{ item.id }}</p>
            <div class="textItemsHalf">归属地：

              <span>{{
                item.belongingPlace == 0
                  ? '随机归属地'
                  : item.belongingPlace == 1
                    ? '固定归属地'
                    : '收货归属地'
              }}</span>
            </div>
            <div class="textItemsHalf">商品售价：<span>{{ item.price }}</span>
            </div>
            <div class="textItemsHalf">商品成本：<span>{{ item.cost }}</span>
            </div>
            <div class="textItemsHalf">年龄限制：
              <span v-if="item.minAge && item.maxAge">
                {{ item.minAge }}-{{ item.maxAge }}周岁
              </span>
              <span v-else> 无限制 </span>
            </div>
            <div class="textItemsHalf">选号方式：
              <span>{{
                item.selectNumberType == 0
                  ? '随机号码'
                  : item.selectNumberType == 1
                    ? '激活号码'
                    : item.selectNumberType == 2
                      ? '在线选号'
                      : item.selectNumberType == 3
                        ? '号池选号'
                        : '- - -'
              }}</span>
            </div>
            <div class="textItemsHalf">证件上传：{{ item.idCardImg==true?"开启":'关闭' }}</div>
            <div class="textItems" style="font-size: 15px">商品佣金：<span style="color: #3491fa">{{ item.commission }}元 /
                <span>{{
                  item.commissionRule == 0
                    ? '秒返'
                    : item.commissionRule == 1
                      ? '次月底返'
                      : '月月返'
                }}</span></span></div>
          </div>
          <a-tooltip :content="item.regionalRestrictionsStr">
            <div class="jinfaBox" v-if="item.areaType == 1">
              禁发区域：<span>{{     item.areaName ? item.areaName : '暂无禁发区域'  }}</span>
            </div>
            <div class="jinfaBox1" v-else-if="item.areaType == 0">
              可发区域：<span>{{ item.areaName ? item.areaName : '暂无可发区域'}}</span></div>
          </a-tooltip>
        </div>
        <div class="cardIformation">
          <div class="halfText1">套餐资费：{{ item.setMealPrice }}元</div>
          <div class="halfText1">通用流量：{{ item.setMealGeneralFlow }}G</div>
          <div class="halfText1">定向流量：{{ item.setMealDirectionalFlow }}G</div>
          <div class="halfText1">免费通话：{{ item.callMinutes }}分钟</div>
          <div class="halfText1">优惠时长：{{ item.discountTime ? item.discountTime : 0 }}月/{{
            item.discountTimeType == 0 ? '固定优惠' : '到期可续'
          }}</div>
          <div class="halfText1">创建时间：{{ item.addTime }}</div>
          <a-tooltip :content="item.settlementRequire">
            <div class="halfText2">结算要求：{{ item.settlementRequire }} </div>
          </a-tooltip>
          <a-tooltip :content="item.setMealIntroduce">
            <div class="halfText2" style="margin-top: 5px;">套餐介绍：{{ item.setMealIntroduce }} </div>
          </a-tooltip>
        </div>
        <div class="btns">
          <div class="btnItem" @click="openUpdateGood(item)">编辑商品</div>
          <div class="btnItem" @click="showDetail(item)">商品资料</div>
          <div class="btnItem" @click="openOneCodeEr(2, item)">分享商品</div>
          <div class="btnItem" @click="openUpdate(item)">商品下单</div>
          <div class="btnItem" @click="openProfitGood(item)">一键分润</div>
        </div>
      </div>
      <div style="width: 32.6%"></div>
      <div style="width: 32.6%"></div>
      <div style="width: 32.6%"></div>
    </div>

    <div class="fixedBoxBottom"
      style="margin-top: 0px; z-index: 5; height: 50px; display: flex; justify-content: center">
      <a-pagination show-jumper position="center" v-model:current="pagination.page" v-model:pageSize="pagination.pageSize"
        :total="pagination?.pageCount" :size="pagination.pageSize" :page-size-options="[12, 24, 36, 48, 60]" show-total
        show-page-size @page-size-change="onPageSizeChange" @change="onChange" />
    </div>
    <!-- 多项搜索 -->
    <a-modal v-model:visible="multipleVisible" @before-close="close" title="多条件搜索" width="400px" :mask-closable="false"
      title-align="start">
      <a-textarea v-model="multipleText" placeholder="请输入搜索条件，一行一个" allow-clear />
      <template #footer>
        <a-space>
          <a-button @click="multipleVisible = false">取消</a-button>
          <a-button type="primary" @click="multipleFn">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 设置可发货地区/禁区 -->
    <a-modal v-model:visible="regionVisible" @before-close="cancelRegion"
      :title="goodInfo.regionalRestrictionsType == 0 ? '设置禁区' : '设置可发地区'" width="600px" :mask-closable="false"
      title-align="start">
      <a-spin :loading="loadingTree" tip="加载中····" style="width: 100%">
        <a-scrollbar style="height: 600px; overflow: auto">
          <a-tree :virtualListProps="{
            height: 600,
          }" :checkable="true" checked-strategy="all" tree-checked-strategy="all" v-model:checked-keys="selectList"
            :data="regionList" :field-names="{ key: 'code', title: 'name' }" />
        </a-scrollbar>
      </a-spin>
      <template #footer>
        <a-space>
          <a-button @click="cancelRegion">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkRegion">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 商品库存 -->
    <a-modal v-model:visible="mallStockVisible" @before-close="mallStockClose" title="商品库存" width="1000px"
      :mask-closable="false" title-align="start">
      <a-form :auto-label-width="true" :model="mallStockForm">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item field="classId" hide-label>
              <a-select v-model="mallStockForm.classIds" style="width: 225px" placeholder="请选择商品分类" allow-clear
                @change="changeStockSeach">
                <a-option v-for="item in classLists" :key="item.id" :value="item.id">{{
                  item.name
                }}</a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="mallId" hide-label>
              <a-select allow-search v-model="mallStockForm.mallId" placeholder="请选择商品" allow-clear
                :options="goodAllList" @change="changeStockSeach" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-table :loading="mallStockLoading" :bordered="{ wrapper: true, cell: tables.bordered }"
        :stripe="(tables.striped as boolean)" :row-class-name="rowClassNameFun" :data="mallStockList"
        :pagination="false" :column-resizable="true" :rowKey="rowKey" table-layout-fixed :row-selection="rowSelection"
        v-model:selectedKeys="selectedKeys" :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }">
        <template #columns>
          <a-table-column v-for="item of mallStockTableList" :key="item.key" align="left" :width="item.width"
            :title="(item.title as string)" :data-index="(item.key as string)" :ellipsis="true" :tooltip="true">
            <template v-if="item.key === 'stock'" #cell="{ record }">
              <span @click="openTku(record, 1)">
                {{ record.stock }}
              </span>
            </template>
            <template v-if="item.key === 'action'" #cell="{ record }">
              <a-button class="list-button" type="text" size="small" @click="openTku(record, 1)">充值</a-button>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <TableFooter :pagination="paginationMallStock" position="center" />
      <template #footer>
        <a-space>
          <a-input-number hide-button :style="{ width: '320px' }" v-model="type0Num" placeholder="请输入充值数量" allow-clear>
            <template #append>
              <a-button type="primary" style="margin-left: 12px" @click="allStockFn">确认充值</a-button>
            </template>
          </a-input-number>
        </a-space>
      </template>
    </a-modal>
    <!-- 链接地址 -->
    <a-modal v-model:visible="linkShow" title="链接地址" width="521px" :mask-closable="false" title-align="start"
      :footer="false">
      <div style="display: flex; justify-content: center; margin: 20px">
        <img :src="imgUrl" style="width: 170px; height: 170px; text-align: center" alt="" />
      </div>
      <div style="display: flex; justify-content: center">
        <div style="
            width: 390px;
            background-color: #f2f3f5;
            border-radius: 4px;
            text-align: center;
            padding: 4px;
          ">
          <a id="bols" :href="urlsa" style="color: #000000" target="_blank">
            <div style="
                display: inline-block;
                white-space: pre-wrap;
                word-break: break-all;
                word-wrap: break-word;
              ">
              {{ urlsa }}
            </div>
          </a>
        </div>
      </div>
      <div style="display: flex; justify-content: center; margin: 20px">
        <div style="display: flex; width: 390px; justify-content: space-between">
          <a-button type="primary" status="success" long @click="downs">保存二维码</a-button>
          <div style="width: 40px"></div>
          <a-button type="primary" long @click="useCommon.copy(urlsa)">复制链接</a-button>
        </div>
      </div>
    </a-modal>
    <!-- 充值库存 -->
    <a-modal v-model:visible="comStockVisible" @before-close="handleCancelComStock" title="充值库存" width="600px"
      :mask-closable="false" title-align="start">
      <a-form ref="comStockRef" :auto-label-width="true" :model="stockInfo">
        <a-form-item label="充值数量" field="mallStock" :rules="[{ required: true, message: '充值数量不能为空' }]"
          :validate-trigger="['change', 'input']" asterisk-position="end">
          <a-input-number v-model="stockInfo.mallStock" placeholder="请输入充值数量" allow-clear />
        </a-form-item>
        <a-form-item label="支付类型" field="payType" :rules="[{ required: true, message: '支付类型不能为空' }]"
          :validate-trigger="['change', 'input']" asterisk-position="end">
          <a-radio-group @change="getPay(stockInfo.payType)" class="radio-bcg" v-model="stockInfo.payType">
            <a-radio :value="10"><template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">余额</div>
                </div>
              </template></a-radio>
            <a-radio v-for="(item, index) in typelist" :key="index" :value="index">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">{{ item.name }}</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="payId" v-if="stockInfo.payList.length > 1" label="支付商户">
          <a-select placeholder="请选择支付商户" allow-search v-model="stockInfo.payId" allow-clear
            @change="getPayFn(stockInfo.payId)">
            <a-option v-for="item in stockInfo.payList" :key="item.id" :value="item.id">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelComStock">取消</a-button>
          <a-button :loading="loading" type="primary" @click="handleBeforeComStock">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 支付扫码 -->
    <a-modal v-model:visible="visibles" :title="path.length > 1 ? '扫码登录' : '扫码支付'" width="280px" :mask-closable="false"
      title-align="start" hide-cancel hide-ok :before-close="beforClosew">
      <div>
        <!-- <div v-if="path.length < 1" style="text-align: center">
          ￥<span style="font-size: 26px">{{ detailForm.name }}</span>
        </div> -->
        <img style="width: 240px; height: 240px" :src="seachForm.imgUrl" alt="" />
      </div>
      <template #footer>
        <a-space>
          <a-button type="primary" v-if="path.length > 1" :loading="loadings" @click="paySuccessFn">
            我已登录
          </a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 充值库存 -->
    <a-modal v-model:visible="comStockVisible1" @before-close="handleCancelComStock1" title="充值库存" width="600px"
      :mask-closable="false" title-align="start">
      <a-form ref="comStockRef1" :auto-label-width="true" :model="stockInfo">
        <a-form-item label="支付类型" field="payType" :rules="[{ required: true, message: '支付类型不能为空' }]"
          :validate-trigger="['change', 'input']" asterisk-position="end">
          <a-radio-group @change="getPay(stockInfo.payType)" class="radio-bcg" v-model="stockInfo.payType">
            <a-radio :value="10"><template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">余额</div>
                </div>
              </template></a-radio>
            <a-radio v-for="(item, index) in typelist" :key="index" :value="index">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">{{ item.name }}</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="payId" v-if="stockInfo.payList.length > 1" label="支付商户">
          <a-select placeholder="请选择支付商户" allow-search v-model="stockInfo1.payId" allow-clear
            @change="getPayFn(stockInfo1.payId)">
            <a-option v-for="item in stockInfo.payList" :key="item.id" :value="item.id">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelComStock1">取消</a-button>
          <a-button :loading="loading" type="primary" @click="handleBeforeComStock1">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 编辑商品 -->
    <a-modal v-model:visible="goodVisible" @before-close="beforeCloseGood" title="编辑商品" width="600px"
      :mask-closable="false" title-align="start">
      <a-form ref="goodRef" :auto-label-width="true" :model="goodInfo">
        <a-form-item label="商品售价" field="price" :rules="[{ required: true, message: '商品售价不能为空' }]"
          :validate-trigger="['change', 'input']" asterisk-position="end">
          <a-input-number v-model="goodInfo.price" placeholder="请输入商品售价" allow-clear />
        </a-form-item>
        <a-form-item label="商品状态" field="state" :rules="[{ required: true, message: '支付类型不能为空' }]"
          :validate-trigger="['change', 'input']" asterisk-position="end">
          <a-radio-group class="radio-bcg" v-model="goodInfo.state">
            <a-radio :value="true"><template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">上架</div>
                </div>
              </template></a-radio>
            <a-radio :value="false"><template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">下架</div>
                </div>
              </template></a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="beforeCloseGood">取消</a-button>
          <a-button :loading="loading" type="primary" @click="handleSubmitGood">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 商品下单 -->
    <a-modal v-model:visible="updateVisible" title="商品下单" width="500px" :mask-closable="false"
      @before-close="beforeCloseUpdate" title-align="start">
      <a-form ref="updateRef" :auto-label-width="true" :model="updateForm">
        <a-form-item label="发货信息" field="str">
          <a-input hide-button v-model="updateForm.str" placeholder="请输入发货信息">
            <template #append>
              <span @click="intellectIdentifyFn"
                style="color: cornflowerblue; padding: 5px; cursor: pointer">智能识别</span>
            </template>
          </a-input>
          <template #extra>
            <div>智能识别地址后，请自行核实信息是否正确</div>
          </template>
        </a-form-item>
        <a-form-item label="寄件人" field="senderId">
          <a-select v-model="updateForm.senderId" style="width: 100%" placeholder="请选择寄件人模板" allow-clear>
            <a-option v-for="item in sendUserList" :key="item.id" :value="item.id">{{
              item.tempName
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-divider dashed>收货信息</a-divider>
        <a-form-item label="划分客户" field="divideCustomersId">
          <a-select v-model="updateForm.divideCustomersId" placeholder="请选择客户" :max-tag-count="1" allow-clear
            allow-search :options="userLists" :virtual-list-props="{ height: 200 }" />
        </a-form-item>
        <a-form-item label="姓名" field="expressName" :rules="[{ required: true, message: '姓名不能为空' }]"
          :validate-trigger="['change', 'input']" asterisk-position="end">
          <a-input hide-button v-model="updateForm.expressName" placeholder="请输入姓名" />
        </a-form-item>
        <a-form-item label="手机号码" field="expressPhone" :rules="[{ required: true, message: '手机号码不能为空' }]"
          :validate-trigger="['change', 'input']" asterisk-position="end">
          <a-input hide-button v-model="updateForm.expressPhone" placeholder="请输入手机号码" />
        </a-form-item>
        <a-form-item v-if="updateForm.idCard !== 0" label="身份证号" field="expressIdCard"
          :rules="[{ required: true, message: '身份证号不能为空' }]" :validate-trigger="['change', 'input']"
          asterisk-position="end">
          <a-input hide-button v-model="updateForm.expressIdCard" placeholder="请输入身份证号" />
        </a-form-item>
        <a-form-item v-if="updateForm.idCardImg == true" label="身份证人像面" field="photoFullFace">
          <a-upload action="/app/user/mall/file/upload/private" :show-file-list="false" @success="onCardSuccess1"
            @error="onError" :image-preview="true">
            <template #upload-button>
              <div class="arco-upload-list-picture custom-upload-avatar" v-if="updateForm.photoFullFace">
                <img :src="updateForm.photoFullFaces" />
                <div class="arco-upload-list-picture-mask">
                  <IconEdit />
                </div>
              </div>
              <div class="arco-upload-picture-card" v-else>
                <div class="arco-upload-picture-card-text">
                  <IconPlus />
                </div>
              </div>
              <!-- </div> -->
            </template>
          </a-upload>
        </a-form-item>
        <a-form-item v-if="updateForm.idCardImg == true" label="身份证国徽面" field="photoReverseSide">
          <a-upload action="/app/user/mall/file/upload/private" :show-file-list="false" @success="onCardSuccess2"
            @error="onError" :image-preview="true">
            <template #upload-button>
              <div class="arco-upload-list-picture custom-upload-avatar" v-if="updateForm.photoReverseSide">
                <img :src="updateForm.photoReverseSides" />
                <div class="arco-upload-list-picture-mask">
                  <IconEdit />
                </div>
              </div>
              <div class="arco-upload-picture-card" v-else>
                <div class="arco-upload-picture-card-text">
                  <IconPlus />
                </div>
              </div>
              <!-- </div> -->
            </template>
          </a-upload>
        </a-form-item>
        <a-form-item v-if="updateForm.idCardImg == true" label="免冠照" field="photoBareheaded">
          <a-upload action="/app/user/mall/file/upload/private" :show-file-list="false" @success="onCardSuccess3"
            @error="onError" :image-preview="true">
            <template #upload-button>
              <div class="arco-upload-list-picture custom-upload-avatar" v-if="updateForm.photoBareheaded">
                <img :src="updateForm.photoBareheadeds" />
                <div class="arco-upload-list-picture-mask">
                  <IconEdit />
                </div>
              </div>
              <div class="arco-upload-picture-card" v-else>
                <div class="arco-upload-picture-card-text">
                  <IconPlus />
                </div>
              </div>
              <!-- </div> -->
            </template>
          </a-upload>
        </a-form-item>
        <a-form-item label="地区" field="regionalCode" :rules="[{ required: true, message: '地区不能为空' }]"
          :validate-trigger="['change', 'input']" asterisk-position="end">
          <a-cascader v-model="updateForm.regionalCode" :options="districtsList" :field-names="fieldNames"
            placeholder="请输入地区" @change="changeCode" />
        </a-form-item>
        <a-form-item label="详细地址" field="expressAddress" :rules="[{ required: true, message: '详细地址不能为空' }]"
          :validate-trigger="['change', 'input']" asterisk-position="end">
          <a-input hide-button v-model="updateForm.expressAddress" placeholder="请输入详细地址" />
        </a-form-item>
        <a-form-item label="下单备注" field="userRemarks">
          <a-input hide-button v-model="updateForm.userRemarks" placeholder="请输入下单备注" />
        </a-form-item>

        <a-divider dashed>下单信息</a-divider>
        <!-- <a-form-item label="下单备注" field="userRemarks">
          <a-input hide-button v-model="updateForm.userRemarks" />
        </a-form-item> -->
        <a-form-item label="商品名称" field="placeOrderRemarks">
          <a-input hide-button readonly v-model="updateForm.mallName" />
        </a-form-item>
        <a-form-item label="商品成本" field="placeOrderRemarks">
          <a-input hide-button readonly v-model="updateForm.price" />
        </a-form-item>
        <a-form-item label="快递费" field="placeOrderRemarks">
          <a-input hide-button readonly v-model="updateForm.expressFee" />
        </a-form-item>
        <a-form-item label="下单数量" field="number">
          <a-input-number hide-button :precision="0" v-model="updateForm.number" />
        </a-form-item>
        <a-form-item label="总金额" field="placeOrderRemarks">
          <div style="
              width: 100%;
              height: 32px;
              padding: 0 12px;
              padding-top: 5px;
              border-radius: 5px;
              background-color: var(--color-fill-2);
            ">{{
              Math.floor((updateForm.number * updateForm.price + updateForm.expressFee) * 100) / 100
            }}</div>
        </a-form-item>
        <a-form-item label="支付方式" field="type">
          <a-radio-group @change="getPayX(updateForm.type)" class="radio-bcg" v-model="updateForm.type">
            <a-radio :value="5"><template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">库存</div>
                </div>
              </template></a-radio>
            <a-radio :value="0"><template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">余额</div>
                </div>
              </template></a-radio>
            <a-radio v-for="(item, index) in typelist" :key="index" :value="index + 1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">{{ item.name }}</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="payId" v-if="updateForm.payList.length > 1" label="支付商户">
          <a-select placeholder="请选择支付商户" allow-search v-model="updateForm.payId" allow-clear
            @change="getPayFnX(updateForm.payId)">
            <a-option v-for="item in updateForm.payList" :key="item.id" :value="item.id">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="beforeCloseUpdate">取消</a-button>
          <a-button type="primary" @click="confirmUpdate">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 支付扫码 -->
    <a-modal v-model:visible="visibleX" :title="path.length > 1 ? '扫码登录' : '扫码支付'" width="280px" :mask-closable="false"
      title-align="start" hide-cancel hide-ok :before-close="beforClosew">
      <div>
        <!-- <div v-if="path.length < 1" style="text-align: center">
          ￥<span style="font-size: 26px">{{ detailForm.name }}</span>
        </div> -->
        <img style="width: 240px; height: 240px" :src="seachForm.imgUrl" alt="" />
      </div>
      <template #footer>
        <a-space>
          <a-button type="primary" v-if="path.length > 1" :loading="loadings" @click="paySuccessFnX">
            我已登录
          </a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 商城设置 -->
    <a-modal v-model:visible="mallSysVisible" @before-close="handleCancelMallSys" title="商城设置" width="600px"
      :mask-closable="false" title-align="start">
      <a-form ref="mallSysRef" :auto-label-width="true" :model="mallSysInfo">
        <a-form-item label="商城名称" field="name" :rules="[
          { required: true, message: '商城名称不能为空' },
          { minLength: 1, maxLength: 100, message: '商城名称必须小于100个字符' },
        ]" :validate-trigger="['change', 'input']" asterisk-position="end">
          <a-input v-model.trim="mallSysInfo.name" placeholder="请输入商城名称" allow-clear />
        </a-form-item>

        <a-form-item label="商城客服" field="customerServiceType">
          <a-radio-group class="radio-bcg" v-model="mallSysInfo.customerServiceType">
            <a-radio :value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">图片</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">链接</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <div v-if="mallSysInfo.customerServiceType == 0">
          <a-form-item label="客服图片" field="img">
            <a-upload action="/app/user/file/upload" :show-file-list="false"  @error="onError" @success="onSuccessBcg1" :image-preview="true">
              <template #upload-button>
                <div class="arco-upload-list-picture custom-upload-avatar" v-if="mallSysInfo.customerServiceImg">
                  <img :src="mallSysInfo.customerServiceImg" />
                  <div class="arco-upload-list-picture-mask">
                    <IconEdit />
                  </div>
                </div>
                <div class="arco-upload-picture-card" v-else>
                  <div class="arco-upload-picture-card-text">
                    <IconPlus />
                  </div>
                </div>
                <!-- </div> -->
              </template>
            </a-upload>
          </a-form-item>
          <a-form-item label="客服微信" field="customerService">
            <a-input v-model.trim="mallSysInfo.customerService" placeholder="请输入微信号" allow-clear />
          </a-form-item>
        </div>
        <div v-if="mallSysInfo.customerServiceType == 1">
          <a-form-item label="客服链接" field="customerService" :rules="[{ required: true, message: '客服链接不能为空' }]"
            :validate-trigger="['change', 'input']" asterisk-position="end">
            <a-input v-model.trim="mallSysInfo.customerService" placeholder="请输入客服链接" allow-clear />
          </a-form-item>
        </div>
        <div v-for="(item, index) in mallSysInfo.banner" :key="index">
          <a-form-item :label="index == 0 ? '商城轮番' : ''" field="img">
            <a-upload action="/app/user/file/upload" :show-file-list="false"  @error="onError" @success="onSuccessBcg2" :image-preview="true"
              @click="imgIndex = index">
              <template #upload-button>
                <div class="arco-upload-list-picture custom-upload-avatar" v-if="item.img">
                  <img :src="item.img" />
                  <div class="arco-upload-list-picture-mask">
                    <IconEdit />
                  </div>
                </div>
                <div class="arco-upload-picture-card" v-else>
                  <div class="arco-upload-picture-card-text">
                    <IconPlus />
                  </div>
                </div>
                <!-- </div> -->
              </template>
            </a-upload>
          </a-form-item>
          <a-form-item label="" field="name">
            <a-input v-model.trim="item.link" placeholder="请输入跳转链接" allow-clear>
              <template #append>
                <a-button type="text" class="list-button" @click="addItemMall">新增</a-button>
                <a-button type="text" status="danger" class="list-button" @click="handleDeleteMall(index)">删除</a-button>
              </template>
            </a-input>
          </a-form-item>
        </div>
        <a-form-item label="商城LOGO" field="logo">
          <a-upload action="/app/user/file/upload" :show-file-list="false"  @error="onError" @success="onSuccessBcg3" :image-preview="true">
            <template #upload-button>
              <div class="arco-upload-list-picture custom-upload-avatar" v-if="mallSysInfo.logo">
                <img :src="mallSysInfo.logo" />
                <div class="arco-upload-list-picture-mask">
                  <IconEdit />
                </div>
              </div>
              <div class="arco-upload-picture-card" v-else>
                <div class="arco-upload-picture-card-text">
                  <IconPlus />
                </div>
              </div>
              <!-- </div> -->
            </template>
          </a-upload>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelMallSys">取消</a-button>
          <a-button type="primary" @click="handleBeforeMallSys">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 发件人 -->
    <a-modal v-model:visible="sendUserVisible" title="发件人" width="630px" :mask-closable="false" :footer="false"
      title-align="start">
      <a-space :size="15" style="margin-bottom: 20px">
        <a-button type="primary" @click="addSendUser">
          <template #icon>
            <icon-plus />
          </template>
          <template #default>新建</template>
        </a-button>
      </a-space>
      <a-table :loading="sendUserLoading" :bordered="{ wrapper: true, cell: tables.bordered }"
        :stripe="(tables.striped as boolean)" :row-class-name="rowClassNameFun" :data="sendUserList" :pagination="false"
        :column-resizable="true" :rowKey="rowKey" table-layout-fixed>
        <template #columns>
          <a-table-column v-for="item of sendUserTableList" :key="item.key" align="left" :width="item.width"
            :title="(item.title as string)" :data-index="(item.key as string)" :ellipsis="true" :tooltip="true">
            <template v-if="item.key === 'actions'" #cell="{ record }">
              <a-space :size="2">
                <a-button class="list-button" type="text" size="small" @click="openUpdateSendUser(record)">编辑</a-button>
                <a-button class="list-button" type="text" size="small" status="warning"
                  @click="openDeleSendUser(record)">删除</a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-modal>
    <!-- 新建/编辑模板-->
    <a-modal v-model:visible="sendUserPop" @before-close="handleCancelSendUser" :title="sendUserInfoTitle" width="600px"
      :mask-closable="false" title-align="start">
      <a-form ref="sendUserRef" :auto-label-width="true" :model="sendUserInfo">
        <a-form-item label="模板名称" field="tempName" :rules="[
          { required: true, message: '模板名称不能为空' },
          { minLength: 1, maxLength: 100, message: '模板名称必须小于100个字符' },
        ]" :validate-trigger="['change', 'input']" asterisk-position="end">
          <a-input v-model.trim="sendUserInfo.tempName" placeholder="请输入模板名称" allow-clear />
        </a-form-item>
        <a-form-item label="发件人姓名" field="senderName" :rules="[{ required: true, message: '发件人姓名不能为空' }]"
          :validate-trigger="['change', 'input']" asterisk-position="end">
          <a-input v-model.trim="sendUserInfo.senderName" placeholder="请输入发件人姓名" allow-clear />
        </a-form-item>
        <a-form-item label="电话号码" field="senderPhone" :rules="[{ required: true, message: '电话号码不能为空' }]"
          :validate-trigger="['change', 'input']" asterisk-position="end">
          <a-input v-model.trim="sendUserInfo.senderPhone" placeholder="请输入电话号码" allow-clear />
        </a-form-item>
        <a-form-item label="默认模板" field="defaults">
          <a-radio-group class="radio-bcg" v-model="sendUserInfo.defaults">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">开启</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">关闭</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelSendUser">取消</a-button>
          <a-button type="primary" @click="handleBeforeSendUser">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 分润设置 -->
    <a-modal v-model:visible="diviSettingShow" title="分润设置" width="500px" :before-close="closeDiviSetting"
      :mask-closable="false" title-align="start">
      <a-form ref="diviSettingRef" :auto-label-width="true" :model="diviSettingForm">
        <a-form-item label="自动划分" field="open">
          <a-radio-group class="radio-bcg" v-model="diviSettingForm.open">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">开启</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">关闭</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="保留利润" field="profit">
          <a-input allow-clear style="width: 100%" v-model="diviSettingForm.profit" :precision="0" :min="0"
            placeholder="请输入保留利润" >
            <template #append>
                        <a-radio-group  v-model="diviSettingForm.profitType">
                          <a-radio :value="0">
                            <template #radio="{ checked }">
                              <div
                                style="display: flex"
                                :class="{ 'custom-radio-card-checked': checked }"
                              >
                                <div className="custom-radio-card-mask">
                                  <div className="custom-radio-card-mask-dot"></div> </div
                                ><div className="custom-radio-card-title">百分比</div>
                              </div>
                            </template>
                          </a-radio>
                          <a-radio :value="1">
                            <template #radio="{ checked }">
                              <div
                                style="display: flex"
                                :class="{ 'custom-radio-card-checked': checked }"
                              >
                                <div className="custom-radio-card-mask">
                                  <div className="custom-radio-card-mask-dot"></div> </div
                                ><div className="custom-radio-card-title">金额</div>
                              </div>
                            </template>
                          </a-radio>
                        </a-radio-group>
                      </template>
            </a-input>
          
        </a-form-item></a-form>
      <template #footer>
        <a-space>
          <a-button @click="closeDiviSetting">取消</a-button>
          <a-button type="primary" :loading="loadingls" @click="setDiviSettingForm">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 商品图片展示 -->
    <a-image-preview-group v-model:visible="imgShow" :default-current="0" infinite :srcList="imgArray" />
    <a-modal v-model:visible="posterShow" :footer="false" title-align="start" title="分享商品">
      <div v-if="posterLength > 0" style="display: flex; justify-content: center; margin: 20px 0px">
        <div style="width: 400px">
          <a-image style="width: 100%; height: 100%; text-align: center" :src="imgUrl" show-loader />
        </div>
      </div>
      <div style="
          background-color: #f2f3f5;
          height: 120px;
          border-radius: 10px;
          padding: 15px;
          display: flex;
          justify-content: space-between;
        ">
        <a-image style="width: 90px; height: 90px; text-align: center" :src="qrImg" show-loader />
        <div style="width: calc(100% - 110px)">
          <div>下单链接：</div>
          <div style="white-space: pre-wrap; word-break: break-all; word-wrap: break-word">{{
            urlsa
          }}</div>
          <div>
            <a-button v-if="posterLength > 0" type="primary" size="mini" @click="downs">保存海报</a-button>
            <a-button style="margin-left: 10px" type="primary" size="mini"
              @click="useCommon.copy(urlsa)">复制链接</a-button>
            <a-button style="margin-left: 10px" type="primary" size="mini" @click="downQr">保存二维码</a-button>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 商品详情 -->
    <a-drawer v-model:visible="goodsDetailVisible" title="商品介绍" width="70%" :mask-closable="false" title-align="start"
      @before-close="detailCloseFn" :footer="false">
      <div class="goodsHead">
        <div style="display: flex;justify-content: space-between;align-items: center;">
          <div class="topBox">
            <a-image :preview="false" @click="openImg(goodsDetail)" :src="reSetImage(goodsDetail.imgs)"  class="leftImage" />
            <div class="cardTags">
              <p class="textItems" style="display: flex; align-items: center; font-size: 20px">
              <div v-for="items in goodsDetail.operator" :key="items" style="margin-right: 6px">
                <img v-if="items == 0" style="width: 15px; height: 15px" src="@/assets/yd.png" alt="" />
                <img v-if="items == 1" style="width: 15px; height: 15px" src="@/assets/lt.png" alt="" />
                <img v-if="items == 2" style="width: 15px; height: 15px" src="@/assets/dx.png" alt="" />
                <img v-if="items == 3" style="width: 15px; height: 15px" src="@/assets/gd.png" alt="" />
              </div>
              {{ goodsDetail.name }}
              </p>
              <p class="textItems">号卡佣金 {{ goodsDetail.commission }}元
                <span v-if="goodsDetail.commissionType == 2" style="margin-left: 2px">
                  x{{ goodsDetail.everyMonthCommission.length }}期
                </span>
                -
                <span>{{
                  goodsDetail.commissionRule == 0
                    ? '秒返'
                    : goodsDetail.commissionRule == 1
                      ? '次月底返'
                      : '月月返'
                }}</span>
              </p>
              <p class="textItems">商品ID：{{ goodsDetail.id }}</p>
              <p class="textItems">创建时间：{{ goodsDetail.addTime }} </p>
              <div class="tags">
                <div v-for="items in goodsDetail.tagList" :key="items.id" style="margin-right: 6px;">
                  <div v-if="items.type == 0"
                    :style="{ 'color': items.fontColor ? items.fontColor : '', 'padding': '2px 5px', 'background': items.fillColor ? items.fillColor : '', 'border': '1px solid' + (items.frameColor ? items.frameColor : '#ffffff') }">
                    {{ items.name }}
                  </div>
                  <img v-else style="width: 100%;height: 20px;" :src="items.img" alt="" />
                </div>
              </div>
            </div>
          </div>
          <div>
            <a-rate v-model="goodsDetail.starRating" style="font-size: 24px" readonly />
            <div
              style="width: 170px;line-height: 25px;text-align: center;background-color: #F5F5F5;border-radius: 3px;padding: 5px;">
              商品状态： <a-switch v-model="goodsDetail.state" @change="changeState(goodsDetail)" size="small">
                <template #checked-icon>
                  <icon-check />
                </template>
                <template #unchecked-icon>
                  <icon-close />
                </template>
              </a-switch>
            </div>
          </div>
        </div>
        <a-descriptions style="margin-top: 20px" :column="4" title="价格介绍" bordered
          :label-style="{ color: 'var(--color-neutral-10)' }" :value-style="{ height: 200 }">
          <a-descriptions-item :span="1" label="商品售价">
            {{ goodsDetail.price }}
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="商品成本">
            <span> {{ goodsDetail.cost }}</span>
          </a-descriptions-item>
          <a-descriptions-item :span="2" label="快递运费">
            {{
              goodsDetail.postType
                ? '包邮'
                : goodsDetail.postType == 1
                  ? goodsDetail.postFee
                  : '运费模板'
            }}
          </a-descriptions-item>
        </a-descriptions>
        <a-descriptions style="margin-top: 20px" :column="4" title="佣金介绍" bordered
          :label-style="{ color: 'var(--color-neutral-10)' }" :value-style="{ height: 200 }">
          <a-descriptions-item :span="1" label="号卡佣金">
            {{ goodsDetail.commission }}
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="佣金规则">
            <span>
              {{
                goodsDetail.commissionRule == 0
                  ? '秒返'
                  : goodsDetail.commissionRule == 1
                    ? '次月底返'
                    : '月月返'
              }}</span>
          </a-descriptions-item>
          <a-descriptions-item :span="2" label="结算要求">
            {{ goodsDetail.settlementRequire }}
          </a-descriptions-item>
          <a-descriptions-item :span="2" label="注意事项">
            <div v-html="goodsDetail.precautions"></div>
          </a-descriptions-item>
        </a-descriptions>
        <a-descriptions style="margin-top: 20px" :column="4" title="资费介绍" bordered
          :label-style="{ color: 'var(--color-neutral-10)' }" :value-style="{ height: 200 }">
          <a-descriptions-item :span="1" label="套餐资费">
            {{ goodsDetail.setMealPrice }}
          </a-descriptions-item>
          <!-- <a-descriptions-item :span="1" label="套餐流量">
            {{ ((goodsDetail.packageFlow + goodsDetail.specifyFlow) / 1024).toFixed(2) }}G
          </a-descriptions-item> -->
          <a-descriptions-item :span="1" label="通用流量">
            {{ goodsDetail.setMealGeneralFlow }}G
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="定向流量">
            {{ goodsDetail.setMealDirectionalFlow }}G
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="免费通话">
            {{ goodsDetail.callMinutes ? goodsDetail.callMinutes : 0 }}分钟
          </a-descriptions-item>
          <!-- <a-descriptions-item :span="1" label="通话价格">
            {{ goodsDetail.callFee }}
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="短信价格">
            {{ goodsDetail.smsFee }}
          </a-descriptions-item> -->
          <a-descriptions-item :span="1" label="原套餐资费">
            {{ goodsDetail.setMealOriginalPrice }}
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="通用流量">
            {{ goodsDetail.setMealOriginalGeneralFlow }}G
          </a-descriptions-item>
          <a-descriptions-item :span="2" label="定向流量">
            {{ goodsDetail.setMealOriginalDirectionalFlow }}G
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="首充金额">
            {{ goodsDetail.firstPayAmount }}元
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="首充描述">
            {{ goodsDetail.firstPayIntroduce }}
          </a-descriptions-item>
          <a-descriptions-item :span="2" label="合约期">
            {{ goodsDetail.contractTime ? goodsDetail.contractTime : 0 }}月
          </a-descriptions-item>
          <a-descriptions-item :span="4" label="套餐介绍">
            {{ goodsDetail.setMealIntroduce }}
          </a-descriptions-item>
        </a-descriptions>
        <a-descriptions style="margin-top: 20px" :column="4" title="其他介绍" bordered
          :label-style="{ color: 'var(--color-neutral-10)' }">
          <a-descriptions-item :span="1" label="归属地">
            <span>{{
              goodsDetail.belongingPlace == 0
                ? '随机归属地'
                : goodsDetail.belongingPlace == 1
                  ? '固定归属地'
                  : '收货归属地'
            }}</span>
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="证件号">
            <span>{{
              goodsDetail.idCard == 0 ? '隐藏' : goodsDetail.idCard == 1 ? '随意输' : '格式合法'
            }}</span>
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="验证方式">
            <span>{{
              goodsDetail.idCard == -1
                ? '不验证'
                : goodsDetail.idCard == 0
                  ? '验证码'
                  : goodsDetail.idCard == 1
                    ? '二要素'
                    : '三要素'
            }}</span>
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="选号方式">
            <span>{{
              goodsDetail.selectNumberType == 0
                ? '随机号码'
                : goodsDetail.selectNumberType == 1
                  ? '激活号码'
                  : goodsDetail.selectNumberType == 2
                    ? '在线选号'
                    : goodsDetail.selectNumberType == 3
                      ? '号池选号'
                      : '- - -'
            }}</span>
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="证件上传">
            <span>{{ goodsDetail.idCardImg == true ? '开启' : '关闭' }}</span>
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="商品库存">
            <span>{{ goodsDetail.stock }}【{{ goodsDetail.stockType == 0 ? '计算' : '不计算' }}】</span>
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="开卡限制">
            <span>{{
              goodsDetail.openCardNumber && goodsDetail.openCardTime
                ? goodsDetail.openCardNumber + '次 ' + goodsDetail.openCardTime + '月'
                : '- - -'
            }}</span>
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="售价限制">
            <span>{{
              goodsDetail.minLimit && goodsDetail.maxLimit
                ? goodsDetail.minLimit + '-' + goodsDetail.maxLimit
                : '- - -'
            }}</span>
          </a-descriptions-item>
          <a-descriptions-item :span="4" label="风控词">
            <span>{{ goodsDetail.riskStr }}</span>
          </a-descriptions-item>
          <a-descriptions-item :span="2" :label="goodsDetail.areaType == 0 ? '不可发货地址' : '可发货地址'">
            <span style="width: 374px; display: inline-block">
              {{ goodsDetail.areaName ? goodsDetail.areaName : '暂无' }}
            </span>
          </a-descriptions-item>
        </a-descriptions>
        <div style="margin-top: 20px; color: var(--color-text-1); font-weight: 500; font-size: 16px">
          图文详情
        </div>
        <div style="margin-top: 12px" v-if="goodsDetail.content">
          <div v-html="goodsDetail.content"></div>
        </div>
        <div style="margin-top: 12px" v-else>当前商品介绍为空</div>
      </div>
    </a-drawer>

  </div>
</template>

<script setup lang="ts">
  import { reSetImage } from '@/api/imageNiu'
import { formpost, get, post } from '@/api/http'
import { usePagination, useRowKey, useTable } from '@/hooks/table'
import { onMounted, reactive, ref } from 'vue'
import useCommonStore from '@/store/modules/common'
import { Message, Modal } from '@arco-design/web-vue'
import { payList, qr } from '@/api/url'
import { number } from 'echarts'
import { userDetail } from '@/api/user'
const domainName = ref(window.location.protocol + '//' + window.location.host)

function changeStockSeachs() {
    goodProfitFN(1)
  }
 //商品回收佣金
 const onDeleteItemSB = (item: any) => {
    Modal.warning({
      title: '操作提示',
      titleAlign: 'start',
      content: '确定要回收佣金？',
      hideCancel: false,
      onOk() {
        formpost({
          url: '/app/mall/user/recovery/profit/sharing',
          data: { mallIdList: item.id, userId: goodProfitInfo.value.userId },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            goodProfitFN()
          }
        })
      },
    })
  }
  function openProfitGood(val: any) {
  Modal.warning({
    title: '操作确认',
    content: '确定要重新分润此商品吗？',
    cancelText: '取消',
    titleAlign: 'start',
    hideCancel: false,
    okText: '确认',
    onOk: () => {
      get({
        url: '/app/mall/user/again/profit/sharing',
        data: () => {
          return {
            mallId: val.id,
          }
        },
      })
        .then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            doRefresh()
          } else {
            Message.error(res.msg)
          }
        })
        .catch(console.log)
    },
  })
}
//修改商品状态
function changeState(item: any) {
  goodsDetailVisible.value = false
  Modal.warning({
    title: '操作确认',
    content: '确定要改变商品状态吗？',
    cancelText: '取消',
    titleAlign: 'start',
    hideCancel: false,
    okText: '确定',
    onOk() {
      get({
        url: '/app/mall/user/update/mall',
        data: () => {
          return {
            state: item.state,
            mallId: item.id,
            price: item.price,
          }
        },
      }).then((res) => {
        if (res.code == 0) {
          Message.success(res.msg)
          doRefresh()
        } else {
          Message.error(res.msg)
        }
      })
    },
    onCancel() {
      doRefresh()
    },
  })
}
//商品详情
const goodsDetailVisible = ref(false)
const goodsDetail: any = ref({})
const showDetail = (item: any) => {
  console.log(item)
  goodsDetailVisible.value = true
  item.imgs = item.img[0]
  goodsDetail.value = item
}
const detailCloseFn = () => {
  goodsDetailVisible.value = false
  doRefresh()
}
function onChange(page: number) {
  doRefresh(page)
}
function onPageSizeChange(pageSize: number) {
  pagination.pageSize = pageSize
  doRefresh()
}
//分享商品
const posterShow = ref(false)
function downQr() {
  // 主要是为了名字不重复
  var name = new Date().getTime()
  downloadIamge(qrImg.value, name)
}
//展示图片
const imgShow = ref(false)
const imgArray: any = ref([])
function openImg(val: any) {
  
  imgArray.value = JSON.parse(JSON.stringify(val.img))
    imgArray.value.forEach((item: any, index: any) => {
      imgArray.value[index] = reSetImage(item)
    })
    imgShow.value = true
 
}
//智能识别
function intellectIdentifyFn() {
  get({
    url: '/app/address/parser',
    data: {
      str: updateForm.value.str,
    },
  }).then((res) => {
    if (res.code == 0) {
      if (res.data.name) {
        updateForm.value.expressName = res.data.name
      }
      if (res.data.phone) {
        updateForm.value.expressPhone = res.data.phone
      }
      if (res.data.detailAddress) {
        updateForm.value.expressAddress = res.data.detailAddress
      }
      const { districtCode, cityCode, provinceCode } = res.data
      const validAddress = districtCode ?? cityCode ?? provinceCode ?? ''
      if(validAddress!=''){
        get({
    url: '/app/mall/order/get/post/fee',
    data: {
      mallIds: [updateForm.value.mallId], //              订单ID
      areaCode: validAddress, //       收件人姓名
    },
  }).then((res) => {
    if (res.code == 0) {
      updateForm.value.expressFee = res.data
    }
  })
      }
      updateForm.value.regionalCode = validAddress
    }
  })
}

// 上传身份证信息
function onCardSuccess1(fileItem: any) {
  updateForm.value.photoFullFace = fileItem.response.data.path
  updateForm.value.photoFullFaces = fileItem.url
}
function onCardSuccess2(fileItem: any) {
  updateForm.value.photoReverseSide = fileItem.response.data.path
  updateForm.value.photoReverseSides = fileItem.url
}
function onCardSuccess3(fileItem: any) {
  updateForm.value.photoBareheaded = fileItem.response.data.path
  updateForm.value.photoBareheadeds = fileItem.url
}
function onError(fileItem: any) {
  Message.error(fileItem.response.msg)
}

const useCommon = useCommonStore()
const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  onlyCurrent: false,
})
const types: any = ref(0)
//分润设置
const diviSettingShow = ref(false)
const diviSettingForm: any = ref({
  open: false,
  profit: '',
  profitType:0
})
const diviSettingRef = ref()
//获取分润设置
function getDiviSettingForm() {
  get({
    url: '/app/mall/profit/sharing/user/get',
  }).then((res) => {
    if (res.code == 0) {
      if (res.data) {
        diviSettingForm.value = res.data
      }
      diviSettingShow.value = true
    }
  })
}
//分润设置关闭前回调
function closeDiviSetting() {
  diviSettingRef.value?.resetFields()
  diviSettingShow.value = false
}
const loadingls = ref(false)
//保存分润设置
function setDiviSettingForm() {
  loadingls.value = true
  post({
    url: '/app/mall/profit/sharing/user/set',
    data: () => {
      return {
        ...diviSettingForm.value,
      }
    },
  }).then((res) => {
    if (res.code == 0) {
      loadingls.value = false
      Message.success(res.msg)
      closeDiviSetting()
      doRefresh()
    }
  })
}
//发件人
const sendUserVisible = ref(false)
function openSendUser() {
  sendUserListFn()
  sendUserVisible.value = true
}
const sendUserList: any = ref([])
const sendUserTableList = ref([
  {
    title: '模板名称',
    key: 'tempName',
    dataIndex: 'tempName',
    checked: true,
    width: 170,
  },
  {
    title: '创建时间',
    key: 'addTime',
    dataIndex: 'addTime',
    checked: true,
    width: 223,
  },
  {
    title: '操作',
    key: 'actions',
    fixed: 'right',
    dataIndex: 'actions',
    width: 176,
    align: 'left',
    checked: true,
  },
])
const sendUserInfoTitle = ref('新建模板')
const sendUserLoading = ref(false)
const sendUserInfo: any = ref({
  /**
   * 发件模板名称
   */

  tempName: '',
  /**
   * 发件人姓名
   */
  senderName: '',
  /**
   * 发件人手机号
   */
  senderPhone: '',
  /**
   * 是否默认
   */
  defaults: true,
})
const sendUserPop = ref(false)
const sendUserRef = ref()
function handleCancelSendUser() {
  sendUserInfo.value.id = null
  sendUserRef.value?.resetFields()
  sendUserPop.value = false
}
function handleBeforeSendUser() {
  sendUserRef.value?.validate().then((error: any) => {
    if (!error) {
      if (sendUserInfo.value.id) {
        post({
          url: '/app/mall/sender/user/update',
          data: () => {
            return {
              ...sendUserInfo.value,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              handleCancelSendUser()
              sendUserListFn()
            } else {
              Message.error(res.msg)
            }
          })
          .catch(console.log)
      } else {
        post({
          url: '/app/mall/sender/user/insert',
          data: () => {
            return {
              ...sendUserInfo.value,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              handleCancelSendUser()
              sendUserListFn()
            } else {
              Message.error(res.msg)
            }
          })
          .catch(console.log)
      }
    }
  })
}
function addSendUser() {
  sendUserInfoTitle.value = '新建模板'
  sendUserPop.value = true
}
function openUpdateSendUser(val: any) {
  sendUserInfoTitle.value = '编辑模板'
  sendUserInfo.value = JSON.parse(JSON.stringify(val))
  sendUserPop.value = true
}
function openDeleSendUser(val: any) {
  Modal.warning({
    title: '操作确认',
    content: '确定要删除此模板吗？',
    cancelText: '取消',
    titleAlign: 'start',
    hideCancel: false,
    okText: '删除',
    onOk: () => {
      get({
        url: '/app/mall/sender/user/delete',
        data: () => {
          return {
            id: val.id,
          }
        },
      })
        .then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            sendUserListFn()
          } else {
            Message.error(res.msg)
          }
        })
        .catch(console.log)
    },
  })
}
function sendUserListFn() {
  sendUserLoading.value = true
  get({
    url: '/app/mall/sender/user/get/list',
  }).then((res: any) => {
    sendUserLoading.value = false
    sendUserList.value = res.data
  })
}
//商城设置
const mallSysVisible = ref(false)
const mallSysRef = ref()
const imgIndex = ref(0)
const mallSysInfo: any = ref({
  logo: '',
  /**
   * 商城名称
   */
  name: '',
  /**
   * 客服类型 0图片 1链接
   */
  customerServiceType: 0,
  /**
   * 客服类型为0是图片地址
   */
  customerServiceImg: '',
  /**
   * 客服微信或者客服链接
   */
  customerService: '',
  /**
   * 代理下架商品权限
   * 下架功能如果关闭，代理商将不能下架商品
   */
  closePermissions: true,
  /**
   * 管理分享链接code，唯一标识
   */
  code: '',
  /**
   * 轮播图
   */
  banner: [
    {
      img: '',
      link: '',
    },
  ],
})
function handleCancelMallSys() {
  mallSysInfo.value = {
    logo: '',
    /**
     * 商城名称
     */
    name: '',
    /**
     * 客服类型 0图片 1链接
     */
    customerServiceType: 0,
    /**
     * 客服类型为0是图片地址
     */
    customerServiceImg: '',
    /**
     * 客服微信或者客服链接
     */
    customerService: '',
    /**
     * 轮播图
     */
    banner: [
      {
        img: '',
        link: '',
      },
    ],
  }
  mallSysVisible.value = false
}
function handleBeforeMallSys() {
  mallSysRef.value?.validate().then((error: any) => {
    if (!error) {
      post({
        url: '/app/mall/setting/user/set',
        data: () => {
          return {
            ...mallSysInfo.value,
          }
        },
      })
        .then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            handleCancelMallSys()
          } else {
            Message.error(res.msg)
          }
        })
        .catch(console.log)
    }
  })
}
const addItemMall = () => {
  mallSysInfo.value.banner.push({
    img: '',
    link: '',
  })
}
const handleDeleteMall = (index: any) => {
  if (mallSysInfo.value.banner == 1) {
    Message.error('最少保留一个')
  } else {
    mallSysInfo.value.banner.splice(index, 1)
  }
}
function openMallSys() {
  get({
    url: '/app/mall/setting/user/get',
  }).then((res: any) => {
    if (res.code == 0) {
      if (res.data) {
        if (res.data.banner.length > 0) {
          mallSysInfo.value = res.data
        } else {
          res.data.banner = [{ img: '', link: '' }]
          mallSysInfo.value = res.data
        }
      }
      mallSysVisible.value = true
    }
  })
}
//下单
const visibleX = ref(false)
const updateVisible = ref(false)
const updateForm: any = ref({
  str: '',
  senderId: '',
  userRemarks: '',
  divideCustomersId: '',
  /**
   * 收件人姓名
   */
  expressName: '',
  /**
   * 收件人手机号
   */
  expressPhone: '',
  /**
   * 收件人身份证
   */
  expressIdCard: '',
  /**
   * 收件地区code
   */
  regionalCode: '',
  /**
   * 收货地址
   */
  expressAddress: '',
  /**
   * 下单备注
   */
  placeOrderRemark: '',
  //选号
  recipientNumber: '',
  phoneParams: {},
  type: 5,
  number: 1,
  expressFee: 0,
  idState: false,
  payId: '',
  payList: [],
})
const updateRef = ref()
const districtsList: any = ref([])
const fieldNames = { value: 'code', label: 'name' }
function changeCode(val: any) {
  const codes = useCommon.getCityCodeByDistrictCode(val, districtsList.value)
  get({
    url: '/app/mall/order/get/post/fee',
    data: {
      mallIds: [updateForm.value.mallId], //              订单ID
      areaCode: codes, //       收件人姓名
    },
  }).then((res) => {
    if (res.code == 0) {
      updateForm.value.expressFee = res.data
    }
  })
}
function openUpdate(val: any) {
  useCommon.getDistrictsList(3).then((res: any) => {
    districtsList.value = res.data
  })
  sendUserListFn()
  getUserList()
  uid.value = ''
  getPayX(1)
  updateForm.value.mallId = val.id
  updateForm.value.idState = val.idCard
  updateForm.value.idCardImg = val.idCardImg
  updateForm.value.mallName = val.name
  updateForm.value.price = val.cost
  updateVisible.value = true
}
function paySuccessFnX() {
  loadings.value = true
  post({
    url:
      '/app/mall/order/user/backstage/pay?payId=' +
      updateForm.value.payId +
      '&state=' +
      uid.value,
    data: [
      {
        ...updateForm.value,
        mallOrderItems: [
          {
            mallId: updateForm.value.mallId,
            number: updateForm.value.number,
            placeOrderRemark: updateForm.value.placeOrderRemark,
          },
        ],
      },
    ],
  })
    .then((res) => {
      if (res.code == 0) {
        loadings.value = false
        if (uid.value == '') {
          visibleX.value = false
          Message.success(res.msg)
        } else {
          seachForm.value.payForm = res.data
          loadings.value = false

          if (res.data.qrcode && res.data.openUrl) {
            if (is_weixn() == false) {
              seachForm.value.imgUrl = `${window.location.protocol}//${window.location.host
                }${qr}?content=${encodeURIComponent(res.data.qrcode)}`
              path.value = ''
              visibleX.value = true
            } else {
              // let a = document.createElement('a')
              // a.setAttribute('href', res.data.openUrl)
              // a.setAttribute('target', '_blank')
              // document.body.appendChild(a)
              // a.click()
              // a.remove()
              if (isIOS() == true) {
                window.location.href = res.data.openUrl
              } else {
                window.open(res.data.openUrl)
              }
            }
          } else {
            if (res.data.qrcode) {
              seachForm.value.imgUrl = `${window.location.protocol}//${window.location.host
                }${qr}?content=${encodeURIComponent(res.data.qrcode)}`
              path.value = ''
              visibleX.value = true
            } else {
              // let a = document.createElement('a')
              // a.setAttribute('href', res.data.openUrl)
              // a.setAttribute('target', '_blank')
              // document.body.appendChild(a)
              // a.click()
              // a.remove()
              if (isIOS() == true) {
                window.location.href = res.data.openUrl
              } else {
                window.open(res.data.openUrl)
              }
            }
          }
        }
      }
    })
    .catch(() => {
      loadings.value = false
    })
}
const getPayX = (val: any) => {
  if (val != 0 || val != 5) {
    updateForm.value.payId = ''
    uid.value = ''
    path.value = ''
    useCommon.getPayList(val).then((res: any) => {
      typelist.value = res.data
      updateForm.value.payList = res.data[val - 1].list
      updateForm.value.payId = res.data[val - 1].list[0].id
      if (res.data[val - 1].list[0].payProduct.type == 2) {
        if (res.data[val - 1].list[0].payProduct.path) {
          uid.value = guid2()
          console.log(uid.value)
          path.value = `${window.location.protocol}//${window.location.host}${res.data[val - 1].list[0].payProduct.path
            }?payId=${updateForm.value.payId}&state=${uid.value}&redirectUri=${window.location.protocol
            }//${window.location.host}/web/template/wechat/login/success`
        }
      }
    })
  } else {
    updateForm.value.payList = []
  }
}

const getPayFnX = (val: any) => {
  path.value = ''
  updateForm.value.payList.forEach((item: any) => {
    if (item.id == val) {
      updateForm.value.payId = val
      // detailForm.price = Math.floor((detailForm.name * item.serviceCharge * 100) / 100) / 100
      if (item.payProduct.type == 2) {
        if (item.payProduct.path) {
          if (uid.value == '') {
            uid.value = guid2()
          }
          path.value = `${window.location.protocol}//${window.location.host}${item.payProduct.path}?payId=${val}&state=${uid.value}&redirectUri=${window.location.protocol}//${window.location.host}/web/template/wechat/login/success`
        }
      }
    }
  })
}
function beforeCloseUpdate() {
  updateRef.value.resetFields()
  updateRef.value.clearValidate()
  updateVisible.value = false
}
function confirmUpdate() {
  // console.log(useCommon.getAreaNamesByCode(updateForm.value.expressAreaCode, districtsList.value))
  updateRef.value.validate((error: any) => {
    if (!error) {
      if (updateForm.value.type == 0 || updateForm.value.type == 5) {
        post({
          url: '/app/mall/order/user/stock/pay?type=' + updateForm.value.type,
          data: [
            {
              ...updateForm.value,
              mallOrderItems: [
                {
                  mallId: updateForm.value.mallId,
                  number: updateForm.value.number,
                  placeOrderRemark: updateForm.value.placeOrderRemark,
                },
              ],
            },
          ],
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            beforeCloseUpdate()
            doRefresh()
          }
        })
      } else {
        if (path.value != '') {
          seachForm.value.imgUrl = `${window.location.protocol}//${window.location.host
            }${qr}?content=${encodeURIComponent(path.value)}`
          console.log(seachForm.value.imgUrl)
          visibleX.value = true
        } else {
          post({
            url:
              '/app/mall/order/user/backstage/pay?payId=' +
              updateForm.value.payId +
              '&state=' +
              uid.value,
            data: [
              {
                ...updateForm.value,
                mallOrderItems: [
                  {
                    mallId: updateForm.value.mallId,
                    number: updateForm.value.number,
                    placeOrderRemark: updateForm.value.placeOrderRemark,
                  },
                ],
              },
            ],
          }).then((res) => {
            if (res.code == 0) {
              seachForm.value.payForm = res.data

              if (res.data.qrcode && res.data.openUrl) {
                if (is_weixn() == false) {
                  seachForm.value.imgUrl = `${window.location.protocol}//${window.location.host
                    }${qr}?content=${encodeURIComponent(res.data.qrcode)}`
                  path.value = ''
                  visibleX.value = true
                } else {
                  // let a = document.createElement('a')
                  // a.setAttribute('href', res.data.openUrl)
                  // a.setAttribute('target', '_blank')
                  // document.body.appendChild(a)
                  // a.click()
                  // a.remove()
                  if (isIOS() == true) {
                    window.location.href = res.data.openUrl
                  } else {
                    window.open(res.data.openUrl)
                  }
                }
              } else {
                if (res.data.qrcode) {
                  seachForm.value.imgUrl = `${window.location.protocol}//${window.location.host
                    }${qr}?content=${encodeURIComponent(res.data.qrcode)}`
                  path.value = ''
                  visibleX.value = true
                } else {
                  // let a = document.createElement('a')
                  // a.setAttribute('href', res.data.openUrl)
                  // a.setAttribute('target', '_blank')
                  // document.body.appendChild(a)
                  // a.click()
                  // a.remove()
                  if (isIOS() == true) {
                    window.location.href = res.data.openUrl
                  } else {
                    window.open(res.data.openUrl)
                  }
                }
              }
            }
          })
        }
      }
    }
  })
}

const comStockVisible1 = ref(false)
const comStockRef1 = ref()
const stockInfo1 = ref({
  mallId: '',
  mallStock: '',
  payId: '',
  state: '',
})
function handleCancelComStock1() {
  selectedKeys1.value = []
  state.value = 0
  comStockVisible1.value = false
}
const type0Num = ref('')
function handleBeforeComStock1() {
  comStockRef1.value?.validate().then((error: any) => {
    if (!error) {
      if (stockInfo.value.payType == 10) {
        post({
          url: '/app/mall/mall/stock/user/balance/pay',
          data: selectedKeys1.value,
        }).then((res: any) => {
          if (res.code == 0) {
            Message.success(res.msg)
            handleCancelComStock1()
            mallStockListFn()
          }
        })
      } else {
        if (path.value != '') {
          seachForm.value.imgUrl = `${window.location.protocol}//${window.location.host
            }${qr}?content=${encodeURIComponent(path.value)}`
          console.log(seachForm.value.imgUrl)
          visibles.value = true
        } else {
          loading.value = true
          post({
            url:
              '/app/mall/mall/stock/user/pay?payId=' +
              stockInfo.value.payId +
              '&state=' +
              uid.value,
            data: selectedKeys1.value,
          })
            .then((res) => {
              seachForm.value.payForm = res.data
              loading.value = false
              if (res.data.qrcode && res.data.openUrl) {
                if (is_weixn() == false) {
                  seachForm.value.imgUrl = `${window.location.protocol}//${window.location.host
                    }${qr}?content=${encodeURIComponent(res.data.qrcode)}`
                  path.value = ''
                  visibles.value = true
                } else {
                  // let a = document.createElement('a')
                  // a.setAttribute('href', res.data.openUrl)
                  // a.setAttribute('target', '_blank')
                  // document.body.appendChild(a)
                  // a.click()
                  // a.remove()
                  if (isIOS() == true) {
                    window.location.href = res.data.openUrl
                  } else {
                    window.open(res.data.openUrl)
                  }
                }
              } else {
                if (res.data.qrcode) {
                  seachForm.value.imgUrl = `${window.location.protocol}//${window.location.host
                    }${qr}?content=${encodeURIComponent(res.data.qrcode)}`
                  path.value = ''
                  visibles.value = true
                } else {
                  // let a = document.createElement('a')
                  // a.setAttribute('href', res.data.openUrl)
                  // a.setAttribute('target', '_blank')
                  // document.body.appendChild(a)
                  // a.click()
                  // a.remove()
                  if (isIOS() == true) {
                    window.location.href = res.data.openUrl
                  } else {
                    window.open(res.data.openUrl)
                  }
                }
              }
            })
            .catch(() => {
              loading.value = false
            })
        }
        // post({
        //   url: '/app/mall/mall/stock/user/pay',
        //   data: [
        //     {
        //       mallId: stockInfo.value.mallId,
        //       mallStock: stockInfo.value.mallStock,
        //       payId: stockInfo.value.payId,
        //       state: uid.value,
        //     },
        //   ],
        // }).then((res: any) => {
        //   if (res.code == 0) {
        //     Message.success(res.msg)
        //     handleCancelComStock()
        //     mallStockListFn()
        //   }
        // })
      }
    }
  })
}
//支付
const visibles = ref(false)
const loadings = ref(false)
const beforClosew = () => {
  visibles.value = false
  visibleX.value = false
}
function isIOS() {
  const userAgent = navigator.userAgent.toLowerCase()
  return /iphone|ipad|ipod/.test(userAgent)
}
function is_weixn() {
  var ua: any = navigator.userAgent.toLowerCase()
  if (ua.match(/MicroMessenger/i) == 'micromessenger') {
    seachForm.value.type = 1
    return true
  } else {
    seachForm.value.type = 2
    return false
  }
}
const paySuccessFn = () => {
  loadings.value = true
  post({
    url: '/app/mall/mall/stock/user/pay?payId=' + stockInfo.value.payId + '&state=' + uid.value,
    data:
      selectedKeys1.value.length > 0
        ? selectedKeys1.value
        : [{ mallId: stockInfo.value.mallId, mallStock: stockInfo.value.mallStock }],
  })
    .then((res) => {
      if (res.code == 0) {
        loadings.value = false
        if (uid.value == '') {
          visibles.value = false
          Message.success(res.msg)
        } else {
          seachForm.value.payForm = res.data
          loadings.value = false

          if (res.data.qrcode && res.data.openUrl) {
            if (is_weixn() == false) {
              seachForm.value.imgUrl = `${window.location.protocol}//${window.location.host
                }${qr}?content=${encodeURIComponent(res.data.qrcode)}`
              path.value = ''
              visibles.value = true
            } else {
              
              if (isIOS() == true) {
                window.location.href = res.data.openUrl
              } else {
                window.open(res.data.openUrl)
              }
            }
          } else {
            if (res.data.qrcode) {
              seachForm.value.imgUrl = `${window.location.protocol}//${window.location.host
                }${qr}?content=${encodeURIComponent(res.data.qrcode)}`
              path.value = ''
              visibles.value = true
            } else {
              
              if (isIOS() == true) {
                window.location.href = res.data.openUrl
              } else {
                window.open(res.data.openUrl)
              }
            }
          }
        }
      }
    })
    .catch(() => {
      loadings.value = false
    })
}
//地区数组
const regionList: any = ref([])
const mathArray: any = ref([])
//通用库存
const comStockVisible = ref(false)
const state = ref(0)
function openTku(item: any, num: any) {
  types.value = num
  stockInfo.value.mallId = item.id
  state.value = 0
  getPay(stockInfo.value.payType)
  comStockVisible.value = true
}
function handleCancelComStock() {
  stockInfo.value.mallStock = ''
  state.value = 0
  comStockVisible.value = false
}
const loading = ref(false)
function handleBeforeComStock() {
  comStockRef.value?.validate().then((error: any) => {
    if (!error) {
      if (stockInfo.value.payType == 10) {
        post({
          url: '/app/mall/mall/stock/user/balance/pay',
          data: [
            {
              mallId: stockInfo.value.mallId,
              mallStock: stockInfo.value.mallStock,
            },
          ],
        }).then((res: any) => {
          if (res.code == 0) {
            Message.success(res.msg)
            handleCancelComStock()
            mallStockListFn()
          }
        })
      } else {
        if (path.value != '') {
          seachForm.value.imgUrl = `${window.location.protocol}//${window.location.host
            }${qr}?content=${encodeURIComponent(path.value)}`
          console.log(seachForm.value.imgUrl)
          visibles.value = true
        } else {
          loading.value = true
          post({
            url:
              '/app/mall/mall/stock/user/pay?payId=' +
              stockInfo.value.payId +
              '&state=' +
              uid.value,
            data: [
              {
                mallId: stockInfo.value.mallId,
                mallStock: stockInfo.value.mallStock,
              },
            ],
          })
            .then((res) => {
              seachForm.value.payForm = res.data
              loading.value = false
              if (res.data.qrcode && res.data.openUrl) {
                if (is_weixn() == false) {
                  seachForm.value.imgUrl = `${window.location.protocol}//${window.location.host
                    }${qr}?content=${encodeURIComponent(res.data.qrcode)}`
                  path.value = ''
                  visibles.value = true
                } else {
                 
                  if (isIOS() == true) {
                    window.location.href = res.data.openUrl
                  } else {
                    window.open(res.data.openUrl)
                  }
                }
              } else {
                if (res.data.qrcode) {
                  seachForm.value.imgUrl = `${window.location.protocol}//${window.location.host
                    }${qr}?content=${encodeURIComponent(res.data.qrcode)}`
                  path.value = ''
                  visibles.value = true
                } else {
               
                  if (isIOS() == true) {
                    window.location.href = res.data.openUrl
                  } else {
                    window.open(res.data.openUrl)
                  }
                }
              }
            })
            .catch(() => {
              loading.value = false
            })
        }
       
      }
    }
  })
}
const comStockRef = ref()

const classLists: any = ref([])
function classListFn() {
    get({
      url: '/app/mall/class/list',
    }).then((res: any) => {
      classLists.value = res.data
    })
  }


//链接地址
const linkShow = ref(false)
const imgUrl = ref('')
const urlsa = ref('')
const codeUser = ref('')
const posterLength = ref(0)
const qrImg = ref('')
function openOneCodeEr(val1: any, val?: any) {
  if (val1 == 1) {
    get({
      url: userDetail,
    }).then((res: any) => {
      if (res.code == 0) {
        if (res.data.code) {
          get({
            url: '/app/poster/get/generation/info',
            data: {
              type: 1,
            },
          }).then((resA: any) => {
            if (resA.code == 0) {
              posterLength.value = resA.data.length
              let ass=''
              if(resA.data.length>0){
                ass=resA.data[0].id
              }else{
                ass=''
              }
              qrImg.value =
                domainName.value +
                qr +
                '?content=' +
                encodeURIComponent(
                  domainName.value + '/wap/pages/mall/mall?mallCode=' + res.data.code
                )
              urlsa.value = domainName.value + '/wap/pages/mall/mall?mallCode=' + res.data.code
              imgUrl.value =
                domainName.value +
                '/app/poster/generation?qrCodeUrl=' +
                encodeURIComponent(
                  domainName.value + '/wap/pages/mall/mall?mallCode=' + res.data.code
                ) +
                '&type=' +
                1 +
                '&productId=' +
                '&posterId=' +
                ass
              posterShow.value = true
            }
          })
        } else {
          Message.error('请先联系管理员，添加后再尝试')
        }
      }
    })
  } else {
    if (val.state == false) {
      Message.error('此商品已下架')
    } else {
      get({
        url: userDetail,
      }).then((res: any) => {
        if (res.code == 0) {
          if (res.data.code) {
            get({
              url: '/app/poster/get/generation/info',
              data: {
                type: 0,
              },
            }).then((resA: any) => {
              if (resA.code == 0) {
                posterLength.value = resA.data.length
                qrImg.value =
                  domainName.value +
                  qr +
                  '?content=' +
                  encodeURIComponent(
                    domainName.value +
                    '/wap/pages/mall/detail?id=' +
                    val.id +
                    '&mallCode=' +
                    res.data.code
                  )
                urlsa.value =
                  domainName.value +
                  '/wap/pages/mall/detail?id=' +
                  val.id +
                  '&mallCode=' +
                  res.data.code
                imgUrl.value =
                  domainName.value +
                  '/app/poster/generation?qrCodeUrl=' +
                  encodeURIComponent(
                    domainName.value +
                    '/wap/pages/mall/detail?id=' +
                    val.id +
                    '&mallCode=' +
                    res.data.code
                  ) +
                  '&type=' +
                  0 +
                  '&productId=' +
                  val.id +
                  '&posterId='

                posterShow.value = true
              }
            })
          } else {
            Message.error('请先联系管理员，添加后再尝试')
          }
        }
      })
    }
  }
}
//下载图片
function downloadIamge(imgsrc: any, name: any) {
  //下载图片地址和图片名
  var image = new Image()
  // 解决跨域 Canvas 污染问题
  image.setAttribute('crossOrigin', 'anonymous')
  image.onload = function () {
    var canvas = document.createElement('canvas')
    canvas.width = image.width
    canvas.height = image.height
    var context = canvas.getContext('2d')
    context.drawImage(image, 0, 0, image.width, image.height)
    var url = canvas.toDataURL('image/png') //得到图片的base64编码数据
    var a = document.createElement('a') // 生成一个a元素
    var event = new MouseEvent('click') // 创建一个单击事件
    a.download = name || 'photo' // 设置图片名称
    a.href = url // 将生成的URL设置为a.href属性
    a.dispatchEvent(event) // 触发a的单击事件
  }
  image.src = imgsrc
}
// 改downs这个函数就行，downloadIamge（‘图片下载地址’，图片名字）
function downs() {
  // 主要是为了名字不重复
  var name = new Date().getTime()
  downloadIamge(imgUrl.value, name)
}

//商品库存
const paginationMallStock = usePagination(mallStockListFn)
const mallStockVisible = ref(false)
const mallStockList = ref([])
const mallStockLoading = ref(false)
const stockInfo: any = ref({
  mallId: '',
  mallStock: '',
  payId: '',
  state: '',
  payType: 0,
  payList: [],
})
const mallStockForm = ref({
  allRound: "",//                  综合搜索(商品名称、月租、流量、年龄)
			mallId: "",//                      商品ID
			name: "",//                        商品名称
			type: "",//                        商品类型 0物联卡 1号卡
			operatorIds:[],//                 运营商 0中国移动 1中国联通 2中国电信  3中国广电
			classIds: [],//                    分类ID
			mainPush: "",//                    是否主推
			belongingPlaces: [],//             归属地 0随机 1固定 2收货地
			selectNumberTypes:[],//           选号方式 0随机号码 1激活选号 2在线选号 3号池选号
			idCardImg: "",//                   是否上传证件照
			commissionRules: [],//             佣金规则 0秒反 1次月底反 2月月反
			settlementType: "",//              结算方式 0手动结算 1自动结算
			discountTimeType: "",//            优惠时长类型 0固定优惠 1到期可续
			stockType: "",//                   库存类型 0计算库存 1不计算库存
			state: "",//                       商品状态
			addTime: "",//                     开始创建时间
			endTime: "",//                     结束创建时间
			addPrice: "",//                    开始售价
			endPrice: "",//                    结束售价
			addCost: "",//                     开始成本
			endCost: "",//                     结束成本
			addSetMealPrice: "",//             开始套餐价格
			endSetMealPrice: "",//             结束套餐价格
			addSetMealGeneralFlow: "",//       开始套餐通用流量
			endSetMealGeneralFlow: "",//       结束套餐通用流量
			addSetMealDirectionalFlow: "",//   开始套餐定向流量
			endSetMealDirectionalFlow: "",//   结束套餐定向流量
			addCallMinutes: "",//              开始通话时间
			endCallMinutes: "",//              结束通话时间
			addFirstPayAmount: "",//           开始首充金额
			endFirstPayAmount: "",//           结束首充金额
			addStock: "",//                    开始库存数量
			endStock: "",//                    结束库存数量
			addCommission: "",//               开始佣金
			endCommission: "",//               结束佣金
			addDiscountTime: "",//             开始优惠时长
			endDiscountTime: "",//             结束优惠时长
			age: "",//         
})
function changeStockSeach() {
  mallStockListFn(1)
}
function mallStockClose() {
  mallStockVisible.value = false
}
const selectedKeys = ref([])
const selectedKeys1: any = ref([])
function allStockFn() {
  if (selectedKeys.value.length > 0) {
    selectedKeys1.value = []
    selectedKeys.value.forEach((item: any) => {
      selectedKeys1.value.push({
        mallId: item,
        mallStock: type0Num.value,
      })
    })
    getPay(stockInfo.value.payType)
    comStockVisible1.value = true
  } else {
    Message.error('请先选择充值商品')
  }
}
function openMallStock() {
  goodAllListFn()
  mallStockListFn(1)
  mallStockVisible.value = true
}
const uid = ref('')
const path = ref('')
const typelist: any = ref([])
const getPay = (val: any) => {
  if (stockInfo.value.payType != 10) {
    stockInfo.value.payId = ''
    uid.value = ''
    path.value = ''
    useCommon.getPayList(val).then((res: any) => {
      typelist.value = res.data
      stockInfo.value.payList = res.data[val].list
      stockInfo.value.payId = res.data[val].list[0].id

      if (res.data[val].list[0].payProduct.type == 2) {
        if (res.data[val].list[0].payProduct.path) {
          uid.value = guid2()
          console.log(uid.value)
          path.value = `${window.location.protocol}//${window.location.host}${res.data[val].list[0].payProduct.path}?payId=${stockInfo.value.payId}&state=${uid.value}&redirectUri=${window.location.protocol}//${window.location.host}/web/template/wechat/login/success`
        }
      }
    })
  } else {
    stockInfo.value.payList = []
  }
}
function guid2() {
  function S4() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
  }
  return S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4()
}

const getPayFn = (val: any) => {
  path.value = ''
  stockInfo.value.payList.forEach((item: any) => {
    if (item.id == val) {
      stockInfo.value.payId = val
      // detailForm.price = Math.floor((detailForm.name * item.serviceCharge * 100) / 100) / 100
      if (item.payProduct.type == 2) {
        if (item.payProduct.path) {
          if (uid.value == '') {
            uid.value = guid2()
          }
          path.value = `${window.location.protocol}//${window.location.host}${item.payProduct.path}?payId=${val}&state=${uid.value}&redirectUri=${window.location.protocol}//${window.location.host}/web/template/wechat/login/success`
        }
      }
    }
  })
}

const goodAllList: any = ref([])
function goodAllListFn() {
  useCommon.userMallFn().then((res) => {
    goodAllList.value = res.data
  })
}
function mallStockListFn(val?: any) {
  mallStockLoading.value = true
  if (val) {
    paginationMallStock.page = val
  }
  formpost({
    url: '/app/mall/user/get/mall/list',
    data: {
      page: paginationMallStock.page,
      size: paginationMallStock.pageSize,
      ...mallStockForm.value,
      operatorIds: mallStockForm.value.operatorIds.toString(),
        classIds: mallStockForm.value.classIds.toString(),
        belongingPlaces: mallStockForm.value.belongingPlaces.toString(),
        selectNumberTypes: mallStockForm.value.selectNumberTypes.toString(),
        commissionRules: mallStockForm.value.commissionRules.toString(),
    },
  }).then((res: any) => {
    mallStockLoading.value = false
    res.data.list.forEach((item: any) => {
      item.showInputs = false
    })
    mallStockList.value = res.data.list
    paginationMallStock.setTotalSize((res.data as any).totalSize)
  })
}
const mallStockTableList = ref([
  {
    title: '商品ID',
    key: 'id',
    dataIndex: 'id',
    checked: true,
    width: 148,
  },
  {
    title: '商品名称',
    key: 'name',
    dataIndex: 'name',
    checked: true,
    width: 290,
  },
  {
    title: '我的库存',
    key: 'stock',
    dataIndex: 'stock',
    checked: true,
    width: 170,
  },
  {
    title: '操作',
    key: 'action',
    dataIndex: 'action',
    checked: true,
    width: 170,
  },
])

//商品详情
const goodVisible = ref(false)
const goodTitle = ref('新建商品')
const goodRef = ref()
const goodInfo: any = ref({
  mallId: '', // 商品ID
  price: '', //  代理售价
  state: '', //  代理商品状态
})

function openUpdateGood(val: any) {
  goodTitle.value = '编辑商品'
  goodInfo.value.mallId = val.id
  goodInfo.value.price = val.price
  goodInfo.value.state = val.state
  goodVisible.value = true
}

function beforeCloseGood() {
  goodInfo.value.id = null
  goodRef.value?.resetFields()
  goodInfo.value = {
    mallId: '', // 商品ID
    price: '', //  代理售价
    state: '', //  代理商品状态
  }
  goodVisible.value = false
}
function handleSubmitGood() {
  goodRef.value?.validate().then((error: any) => {
    if (!error) {
      get({
        url: '/app/mall/user/update/mall',
        data: () => {
          return {
            ...goodInfo.value,
          }
        },
      })
        .then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            beforeCloseGood()
            doRefresh()
          } else {
            Message.error(res.msg)
          }
        })
        .catch(console.log)
    }
  })
}
//商品图片上传
const onSuccessBcg = (fileItem: any) => {
  goodInfo.value.img = fileItem.response.data.path
}
//商品设置上传客服图片
const onSuccessBcg1 = (fileItem: any) => {
  mallSysInfo.value.customerServiceImg = fileItem.response.data.path
}
//商品设置上传客服图片
const onSuccessBcg3 = (fileItem: any) => {
  mallSysInfo.value.logo = fileItem.response.data.path
}
//商品设置上传轮番图片
const onSuccessBcg2 = (fileItem: any) => {
  mallSysInfo.value.banner[imgIndex.value].img = fileItem.response.data.path
}
//设置可发货/禁区
const regionVisible = ref(false)
const loadingTree = ref(false)
const selectList: any = ref([])
const arr: any = ref([])
const cancelRegion = () => {
  arr.value = []
  selectList.value = []
  regionVisible.value = false
}
const handleBeforeOkRegion = () => {
  console.log(selectList.value)
  goodInfo.value.areaCode = selectList.value
  console.log(goodInfo.value.regionalRestrictions)
  regionVisible.value = false
}
const clickSet = () => {
  getDistrictsList(3)
  regionVisible.value = true
  selectList.value = goodInfo.value.areaCode
}
//获取地区列表
const getDistrictsList = (val: any) => {
  useCommon.getDistrictsList(val).then((res: any) => {
    regionList.value = res.data
  })
}
//列表操作
const pagination = usePagination(doRefresh)
const rowKey = useRowKey('id')
const tableColumns = reactive({
  list: [
    {
      title: '商品ID',
      key: 'id',
      dataIndex: 'id',
      checked: true,
      width: 93,
    },
    {
      title: '商品名称',
      key: 'name',
      dataIndex: 'name',
      checked: true,
      width: 289,
    },
    {
      title: '我的成本',
      key: 'cost',
      dataIndex: 'cost',
      checked: true,
      width: 143,
    },
    {
      title: '商品售价',
      key: 'price',
      dataIndex: 'price',
      checked: true,
      width: 143,
    },
    {
      title: '商品佣金',
      key: 'commission',
      dataIndex: 'commission',
      checked: true,
      width: 143,
    },
    {
      title: '我的利润',
      key: 'li',
      dataIndex: 'li',
      checked: true,
      width: 143,
    },
    {
      title: '商品库存',
      key: 'stock',
      dataIndex: 'stock',
      checked: true,
      width: 143,
    },
    {
      title: '商品状态',
      key: 'state',
      dataIndex: 'state',
      checked: true,
      width: 143,
    },
    {
      title: '创建时间',
      key: 'addTime',
      dataIndex: 'addTime',
      checked: true,
      width: 245,
    },
    {
      title: '操作',
      key: 'actions',
      dataIndex: 'actions',
      checked: true,
      width: 200,
      fixed: 'right',
    },
  ],
})
//一行一个多ID搜索
const multipleVisible = ref(false)
const multipleText = ref('')
const open = () => {
  multipleVisible.value = true
}
const close = () => {
  multipleVisible.value = false
}
function multipleFn() {
  const arr = multipleText.value.split(/\n/g)
  form.id = arr.toString()
  multipleVisible.value = false
}
const typeText = ref('')
const type = ref('name')
const typeLists = ref([
  {
    name: '商品名称',
    value: 'name',
  },
  {
    name: '商品ID',
    value: 'id',
  },
])
function typeFn() {
  for (var key in form) {
    if (key !== type.value) {
      form[key] = ''
    }
  }
}
//商品列表搜索项
const form = reactive({
  allRound: "",//                  综合搜索(商品名称、月租、流量、年龄)
			mallId: "",//                      商品ID
			name: "",//                        商品名称
			type: "",//                        商品类型 0物联卡 1号卡
			operatorIds:[],//                 运营商 0中国移动 1中国联通 2中国电信  3中国广电
			classIds: [],//                    分类ID
			mainPush: "",//                    是否主推
			belongingPlaces: [],//             归属地 0随机 1固定 2收货地
			selectNumberTypes:[],//           选号方式 0随机号码 1激活选号 2在线选号 3号池选号
			idCardImg: "",//                   是否上传证件照
			commissionRules: [],//             佣金规则 0秒反 1次月底反 2月月反
			settlementType: "",//              结算方式 0手动结算 1自动结算
			discountTimeType: "",//            优惠时长类型 0固定优惠 1到期可续
			stockType: "",//                   库存类型 0计算库存 1不计算库存
			state: "",//                       商品状态
			addTime: "",//                     开始创建时间
			endTime: "",//                     结束创建时间
			addPrice: "",//                    开始售价
			endPrice: "",//                    结束售价
			addCost: "",//                     开始成本
			endCost: "",//                     结束成本
			addSetMealPrice: "",//             开始套餐价格
			endSetMealPrice: "",//             结束套餐价格
			addSetMealGeneralFlow: "",//       开始套餐通用流量
			endSetMealGeneralFlow: "",//       结束套餐通用流量
			addSetMealDirectionalFlow: "",//   开始套餐定向流量
			endSetMealDirectionalFlow: "",//   结束套餐定向流量
			addCallMinutes: "",//              开始通话时间
			endCallMinutes: "",//              结束通话时间
			addFirstPayAmount: "",//           开始首充金额
			endFirstPayAmount: "",//           结束首充金额
			addStock: "",//                    开始库存数量
			endStock: "",//                    结束库存数量
			addCommission: "",//               开始佣金
			endCommission: "",//               结束佣金
			addDiscountTime: "",//             开始优惠时长
			endDiscountTime: "",//             结束优惠时长
			age: "",//     
})
const seachForm = ref()
//重置商品搜索项
function resetFn() {
  seachForm.value?.resetFields()
  form.addPrice = ''
  form.addPrice = ''
  form.addCost =  ""//                     开始成本
  form.endCost =  ""//                     结束成本
  form.addSetMealPrice =  ""//             开始套餐价格
  form.endSetMealPrice =  ""//             结束套餐价格
  form.addSetMealGeneralFlow =  ""//       开始套餐通用流量
  form.endSetMealGeneralFlow =  ""//       结束套餐通用流量
  form.addSetMealDirectionalFlow =  ""//   开始套餐定向流量
  form.endSetMealDirectionalFlow =  ""//   结束套餐定向流量
  form.addCallMinutes =  ""//              开始通话时间
  form.endCallMinutes =  ""//              结束通话时间
  form.addFirstPayAmount =  ""//           开始首充金额
  form.endFirstPayAmount =  ""//           结束首充金额
  form.addStock =  ""//                    开始库存数量
  form.endStock =  ""//                    结束库存数量
  form.addCommission =  ""//               开始佣金
  form.endCommission =  ""//               结束佣金
  form.addDiscountTime =  ""//             开始优惠时长
  form.endDiscountTime =  ""//             结束优惠时长
  multipleText.value = ''
  typeText.value = ''
  doRefresh(1)
}
//获取商品列表内容
const table = useTable()
function doRefresh(value?: number) {
  tables.tableLoading = true
  if (value) {
    pagination.page = value
  }
  form[type.value] = typeText.value
  formpost({
    url: '/app/mall/user/get/mall/list',
    data: () => {
      return {
        page: pagination.page,
        size: pagination.pageSize,
        ...form,
        operatorIds: form.operatorIds.toString(),
        classIds: form.classIds.toString(),
        belongingPlaces: form.belongingPlaces.toString(),
        selectNumberTypes: form.selectNumberTypes.toString(),
        commissionRules: form.commissionRules.toString(),
      }
    },
  }).then((res: any) => {
    tables.tableLoading = false
    table.handleSuccess(res.data.list)
    pagination.setTotalSize((res.data as any).totalSize)
  })
}

//导出商品列表
const goodsExport = () => {
  form[type.value] = typeText.value
  useCommon
    .downLoads('/app/mall/user/get/mall/list/export', form, '商品列表')
    .then(() => { })
    .catch(() => { })
}

//列表样式操作
const tables = reactive({
  tableLoading: false,
  bordered: false,
  striped: false,
  expand: [1],
  isExpand: false,
})
const onUpdateBorder = (isBordered: boolean) => {
  tables.bordered = isBordered
}
function onUpdateStriped(isStriped: boolean) {
  tables.striped = isStriped
}
function rowClassNameFun(_record: any, index: number) {
  return index % 2 === 1 && table.striped.value ? 'table-striped' : null
}
//跟踪API开始时间限制结束时间
function changeTraceEnd(time: any) {
  return time.getTime() > new Date(form.endTime).getTime() //大于结束时间的不选
}
//跟踪API结束时间限制开始时间
function changeTraceStart(time: any) {
  return time.getTime() < new Date(form.addTime).getTime() //小于开始时间的不选
}
//客户
const userLists = ref([])
function getUserList() {
  useCommon.userListse().then((res: any) => {
    userLists.value = res.data
  })
}
onMounted(() => {
  pagination.pageSize=12
  doRefresh()
  classListFn()
})
</script>

<style lang="less" scoped>
.goodsHead {
  width: 100%;
  padding: 20px;

  .topBox {
    width: 70%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    /* 示例代码 */

    .shareBtn {
      cursor: pointer;
      position: absolute;
      right: 10px;
      top: 10px;
    }

    .leftImage {
      border-radius: 10px;
      width: 150px;
      height: 150px;
      overflow: hidden;
    }

    .cardTags {
      flex-grow: 1;
      margin-left: 20px;

      .textItems {
        margin-top: 4px;
        font-size: 16px;
        color: var(--color-neutral-10);
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .tags {
        margin-top: 4px;
        display: flex;
        align-items: center;
      }
    }

    .jinfaBox {
      width: 100%;
      margin-top: 10px;
      border-radius: 2px;
      background-color: var(--color-neutral-2);
      color: #ff0000;
      font-size: 11px;
    }

    .jinfaBox1 {
      width: 100%;
      margin-top: 10px;
      border-radius: 2px;
      background-color: var(--color-neutral-2);
      color: rgb(var(--arcoblue-6));
      font-size: 11px;
    }
  }
}

:deep(.bcg) {
   padding: 0px !important;
 }

 :deep(.bcgConfig) {
   display: none;
 }

.zhuClass {
  border-radius: 2px;
  padding: 3px;
  padding-right: 1px;
  font-size: 12px;
  color: #ffffff;
  background: linear-gradient(to right, #ffca66, #ffa700);
  margin-right: 5px;
}

.imgBcg {
  position: absolute;
  right: 10px;
  top: 40px;
  display: block;
  opacity: 0.6;
  width: 125px;
  height: 125px;
  z-index: 1;
}

.list-button {
  margin-right: 5px;
  padding: 0px;
}

.box {
  display: flex;
  align-items: center;
  height: 15px;

  .line {
    width: 5px;
    height: 15px;
    margin-right: 10px;
    background-color: #40a1ff;
  }
}

:deep(.arco-collapse-item-header-right) {
  padding-left: 20px;
}

:deep(.arco-collapse-item-header-right + .arco-collapse-item-content) {
  padding-left: 10px;
}

:deep(.arco-collapse-item-header) {
  border: none;
}

:deep(.arco-radio) {
  margin-right: 8px;
}

:deep(.arco-rate) {
  font-size: 12px;
  color: #dbdcde !important;
  min-height: 16px;
}

:deep(.arco-collapse-item) {
  border: none;
}

:deep(.arco-collapse-item-content) {
  background: none;
  padding-right: 10px;
}

:deep(.arco-input-append) {
  padding: 0 !important;
}
</style>
